<!DOCTYPE html>
<!-- saved from url=(0060)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/10-2.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>图片时间（动画扩展版）</title>
	<style>
		html, body, ul {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
			display: inline-block;
			width: 50px;
			height: 70px; 
			position: relative;
			overflow: hidden;
		}
		img {
			border: 0;
			width: 50px;
			height: 70px;
		}
		ul {
			margin: 50px auto;
			width: 400px;
			font-size: 0;
		}
		li div {
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
	<script src="./图片时间（动画扩展版）_files/miaov.js"></script>
	<script>
		window.onload = function(){
			var oUl = document.getElementsByTagName('ul')[0],
				aLi = document.getElementsByTagName('li');

			function toTwo(n){
				return n < 10 ? '0' + n : '' + n
			}

			function fnTime(){
				var myTime = new Date(),
					iHours = myTime.getHours(),
					iMinutes = myTime.getMinutes(),
					iSeconds = myTime.getSeconds(),
					str = toTwo(iHours) + ':' + toTwo(iMinutes) + ':' + toTwo(iSeconds);

				function fnFlip(li, idx){
					var oDiv = li.getElementsByTagName('div')[0],
						aImg = li.getElementsByTagName('img');

					if (str.charAt(idx) == ':'){
						aImg[0].src = '10-img/colon.JPG';
						setTimeout(function(){
							aImg[0].src = '10-img/colon2.jpg';
						}, 500)
					} else {
						aImg[1].src = '10-img/' + str.charAt(idx) + '.JPG';
						if(aImg[0].src != aImg[1].src) {
							doMove(oDiv, 'top', 10, -70, function(){
								aImg[0].src = aImg[1].src;
								oDiv.style.top = 0 + 'px';
							})
						}
					}
				}

				for(var i=0; i<aLi.length; i++){
					fnFlip(aLi[i], i);
				}
	
			}

			setInterval(fnTime, 1000);

		}
	</script>
</head>
<body>
	<ul>
		<li>
			<div style="top: 0px;">
				<img src="./图片时间（动画扩展版）_files/1.JPG" alt="">
				<img src="./图片时间（动画扩展版）_files/1.JPG" alt="">
			</div>
		</li>
		<li>
			<div style="top: 0px;">
				<img src="./图片时间（动画扩展版）_files/9.JPG" alt="">
				<img src="./图片时间（动画扩展版）_files/9.JPG" alt="">
			</div>
		</li>
		<li>
			<div>
				<img src="./图片时间（动画扩展版）_files/colon.JPG" alt="">
			</div>
		</li>
		<li>
			<div style="top: 0px;">
				<img src="./图片时间（动画扩展版）_files/4.JPG" alt="">
				<img src="./图片时间（动画扩展版）_files/4.JPG" alt="">
			</div>
		</li>
		<li>
			<div style="top: 0px;">
				<img src="./图片时间（动画扩展版）_files/9.JPG" alt="">
				<img src="./图片时间（动画扩展版）_files/9.JPG" alt="">
			</div>
		</li>
		<li>
			<div>
				<img src="./图片时间（动画扩展版）_files/colon.JPG" alt="">
			</div>
		</li>
		<li>
			<div style="top: 0px;">
				<img src="./图片时间（动画扩展版）_files/5.JPG" alt="">
				<img src="./图片时间（动画扩展版）_files/5.JPG" alt="">
			</div>
		</li>
		<li>
			<div style="top: 0px;">
				<img src="./图片时间（动画扩展版）_files/0.JPG" alt="">
				<img src="./图片时间（动画扩展版）_files/0.JPG" alt="">
			</div>
		</li>
	</ul>

<div id="__nightingale_view_cover" style="width: 100%; height: 100%; transition: -webkit-transform 10s ease-in-out; position: fixed !important; left: 0px !important; bottom: 0px !important; overflow: hidden !important; pointer-events: none !important; z-index: 2147483647; opacity: 0; background: rgb(0, 0, 0) !important;"></div></body></html>